<template>
  <div class="sys-symbol" align="center" :class="active? 'sys-symbol-active':''">
    <canvas ref="canvas" :width="size" :height="size"></canvas>
    <el-divider></el-divider>
    <span class="name">{{name}}</span>
  </div>
</template>

<script>
  import Svg2Png from '@/utils/svg2png';

  export default {
    name: "index",
    data: function () {
      return {
        icons: undefined,
        ctx: undefined
      }
    },
    props: {
      name: {
        type: String,
        default: '名称'
      },
      type: {
        type: Number,
        default: 2
      },
      size: {type: Number, default: 50},

      strokeStyle: {
        type: String,
        default: 'rgba(0,0,0,1)'
      },
      lineWidth: {
        type: Number,
        default: 150
      },
      fillStyle: {
        type: String,
        default: 'rgba(255,255,255,1)'
      },
      flag: {
        type: String,
        default: '面'
      },
      active: {
        type: Boolean,
        default: function () {
          return false;
        }
      }
    },
    methods: {
      initCtx() {
        this.ctx = this.$refs.canvas.getContext('2d');
        this.clearCanvas();
        this.icons[this.flag].draw(this.ctx);
        this.ctx.strokeStyle = this.strokeStyle;  //线条颜色 rgba
        this.ctx.lineWidth = parseFloat(this.lineWidth / 10);         //线宽
        this.ctx.fillStyle = this.fillStyle;      //背景色   rgba
        this.ctx.stroke();
        this.ctx.fill();

      },
      clearCanvas(){
        this.ctx.clearRect(0, 0, this.size, this.size);
      }
    },
    mounted() {
      const svg = new Svg2Png();
      this.icons = svg.icons;
      this.initCtx();
    },
    watch: {
      strokeStyle: function (n, o) {
        this.ctx.clearRect(0, 0, this.size, this.size);
        this.ctx.strokeStyle = this.strokeStyle;  //线条颜色 rgba
        this.ctx.stroke();
        this.ctx.fill();
      },
      lineWidth: function (n, o) {
        this.ctx.clearRect(0, 0, this.size, this.size);
        this.ctx.lineWidth = parseFloat(this.lineWidth / 10);         //线宽
        this.ctx.stroke();
        this.ctx.fill();
      },
      fillStyle: function (n, o) {
        this.ctx.clearRect(0, 0, this.size, this.size);
        this.ctx.fillStyle = this.fillStyle;      //背景色   rgba
        this.ctx.stroke();
        this.ctx.fill();
      },
      flag: function (n, o) {
        this.initCtx();
      }
    }
  }
</script>

<style>
  .sys-symbol {
    position: relative;
    /*width: 80px;*/
    /*height: 80px;*/
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .sys-symbol:hover {
    cursor: pointer;
    background-color: #e5e5e5;
  }

  .sys-symbol-active {
    background-color: #d4d4d4;

  }

  .sys-symbol .el-divider--horizontal {
    margin: 0;
  }

  .sys-symbol .name {
    position: relative;
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-size: 5px;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    text-overflow: ellipsis;
    text-after-overflow: hidden;
  }
</style>
